<!-- 筛选组件1 -->
<template>
  <!-- 最大盒子 -->
  <div class="main-box">
    <!-- 搜索的开始 -->
    <div class="search-name">
      <div class="search-name-top">
        <div>
          <img src="../assets/shaixuan.png" alt />
        </div>
        <div>
          <span>筛选</span>
        </div>
      </div>
      <div class="search-name-bottom">
        <div class="search-content-left">
          <span>输入搜索：</span>
          <slot name="inp">
            <el-input placeholder="输入轮播图的标题......" v-model="inpVal" clearable></el-input>
          </slot>
        </div>
        <div class="search-content-con">
          <span>上传时间：</span>
          <div>
            <el-date-picker
              v-model="value1"
              style=" width: 163px; height:40px;  margin-right:8px;font-size:13px;"
              type="date"
              placeholder="开始日期"
            ></el-date-picker>
          </div>
          <span style="color:#ccc;">一</span>
          <div class="block">
            <el-date-picker
              v-model="value2"
              style=" width: 163px; height:40px; margin-left:8px;font-size:13px;"
              type="date"
              placeholder="结束日期"
            ></el-date-picker>
          </div>
        </div>
        <div class="search-content-right">
          <el-button>
            <img src="../assets/btnBG.png" alt />
            <slot name="sx">
              <span>筛选</span>
            </slot>
          </el-button>
          <slot name="qk">
            <p>清空筛选条件</p>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cnp from "../components/biaoti";
export default {
  data() {
    return {
      inpVal: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  name: "Star",
  components: {
    cnp,
  },
};
</script>
<style  scoped>
.main-box {
  width: 1100px;
  margin: 0 auto;
}
.search-name {
  width: 1100px;
  height: 130px;
  /* margin-left: 20px; */
  margin: 0 auto;
  border: 1px solid rgb(228, 228, 228);
  padding-left: 25px;
  padding-top: 16px;
}
.search-name-top {
  display: flex;
}
.search-name-top img {
  width: 16px;
  height: 16px;
  display: block;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
}
.search-name-top span {
  font-size: 14px;
  color: #999;
  position: relative;
  left: 4px;
  top: -3px;
}

.search-name-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.search-name-bottom span {
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
}
.search-content-left .el-input {
  width: 185px;
  height: 40px;
  color: #fff;
  font-size: 13px;
  padding: 0;
}
.search-content-con {
  width: 441px;
  height: 40px;
  line-height: 40px;
  display: flex;
}
.search-content-con .el-date-picker {
  width: 103px;
  height: 40px;
  margin: 0 5px;
}
.search-content-right {
  padding-top: 4px;
  width: 270px;
  height: 40px;
  display: flex;
}
.search-content-right p {
  font-size: 12px;
  color: #9137f3;
  line-height: 40px;
  margin-left: 26px;
}
.search-content-right .el-button {
  width: 98px;
  height: 36px;
  background: #9137f3;
  position: relative;
}
.search-content-right .el-button img {
  position: absolute;
  left: 22px;
  top: 11px;
}
.search-content-right .el-button span {
  font-size: 13px;
  color: #fff;
  margin-left: 20px;
}
.search-content {
  width: 1110px;
  margin: 20px 0 0 20px;
  min-height: 600px;
  background-color: #ccc;
  border: 1px solid rgb(228, 228, 228);
}
</style>